/**
 * @param {HTMLElement} container - 滑条容器元素
 * @param {Object} options - 配置选项
 * @param {number} options.value - 初始值 (0-100)
 * @param {string} options.trackColor - 轨道背景色
 * @param {string} options.progressColor - 进度条颜色
 * @param {string} options.thumbStyle - 滑块样式 ('dot', 'arrow', 'none')
 * @param {string} options.arrowDirection - 箭头方向 ('up', 'down', 'left', 'right')
 * @param {string} options.direction - 滑条方向 ('horizontal', 'vertical')
 * @param {Function} options.onChange - 值变化时的回调函数
 */
function createCustomSlider(container, options = {}) {
    // 默认配置
    const defaults = {
        value: 0,
        trackColor: '#e0e0e0',
        progressColor: '#4a90e2',
        thumbStyle: 'dot',
        arrowDirection: 'up',
        direction: 'horizontal',
        onChange: () => {}
    };

    // 合并配置
    const config = {
        ...defaults,
        ...options
    };

    // 清除容器内容
    container.innerHTML = '';

    // 创建DOM结构
    const track = document.createElement('div');
    track.className = `slider-track ${config.direction === 'vertical' ? 'slider-vertical' : ''}`;

    const progress = document.createElement('div');
    progress.className = 'slider-progress';

    const thumb = document.createElement('div');
    if (config.thumbStyle === 'arrow') {
        thumb.className = `slider-thumb-arrow arrow-${config.arrowDirection}`;
    } else {
        thumb.className = `slider-thumb-${config.thumbStyle}`;
    }

    track.appendChild(progress);
    track.appendChild(thumb);
    container.appendChild(track);

    // 应用颜色
    track.style.backgroundColor = config.trackColor;
    progress.style.backgroundColor = config.progressColor;

    if (config.thumbStyle === 'arrow') {
        // 设置箭头颜色
        const borderProp = {
            'up': 'borderBottomColor',
            'down': 'borderTopColor',
            'left': 'borderRightColor',
            'right': 'borderLeftColor'
        } [config.arrowDirection];

        thumb.style[borderProp] = config.progressColor;
    } else if (config.thumbStyle === 'dot') {
        thumb.style.borderColor = config.progressColor;
    }

    // 当前值
    let currentValue = Math.min(100, Math.max(0, config.value));

    // 更新UI
    function updateUI() {
        if (config.direction === 'horizontal') {
            progress.style.width = `${currentValue}%`;
            progress.style.height = '100%';
        } else {
            progress.style.height = `${currentValue}%`;
            progress.style.width = '100%';
        }

        if (config.thumbStyle !== 'none') {
            if (config.direction === 'horizontal') {
                thumb.style.left = `${currentValue}%`;
                if (config.thumbStyle === 'arrow') {
                    thumb.style.top = config.arrowDirection === 'up' ? '100%' :
                        config.arrowDirection === 'down' ? '-16px' : '50%';
                }
            } else {
                thumb.style.top = `${100 - currentValue}%`;
                if (config.thumbStyle === 'arrow') {
                    thumb.style.left = config.arrowDirection === 'left' ? '100%' :
                        config.arrowDirection === 'right' ? '-16px' : '50%';
                }
            }
        }
    }

    // 设置值
    function setValue(newValue, triggerCallback = true) {
        currentValue = Math.min(100, Math.max(0, newValue));
        updateUI();
        if (triggerCallback) {
            config.onChange(currentValue);
        }
    }

    // 获取值
    function getValue() {
        return currentValue;
    }

    // 计算点击位置对应的值
    function getValueFromPosition(clientX, clientY) {
        const rect = track.getBoundingClientRect();
        let position;

        if (config.direction === 'horizontal') {
            position = (clientX - rect.left) / rect.width;
        } else {
            position = 1 - ((clientY - rect.top) / rect.height);
        }

        return Math.round(position * 100);
    }

    // 点击轨道事件
    track.addEventListener('click', (e) => {
        setValue(getValueFromPosition(e.clientX, e.clientY));
    });

    // 拖动滑块事件
    if (config.thumbStyle !== 'none') {
        thumb.addEventListener('mousedown', (e) => {
            e.preventDefault();

            const onMouseMove = (e) => {
                setValue(getValueFromPosition(e.clientX, e.clientY));
            };

            const onMouseUp = () => {
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
            };

            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });
    }

    // 初始化UI
    setValue(currentValue, false);

    // 返回API方法
    return {
        setValue,
        getValue,
        updateConfig: (newOptions) => {
            Object.assign(config, newOptions);
            // 重新创建滑块以应用新配置
            createCustomSlider(container, config);
        }
    };
}

// 初始化演示滑条
let customSlider = createCustomSlider(document.getElementById('customSlider'), {
    value: 30,
    onChange: (value) => {
        document.getElementById('customValue').textContent = `当前值: ${value}%`;
    }
});

// 显示/隐藏箭头方向选项
document.getElementById('thumbStyle').addEventListener('change', function () {
    document.getElementById('arrowDirectionGroup').style.display =
        this.value === 'arrow' ? 'block' : 'none';
});

// 应用自定义设置
document.getElementById('applyBtn').addEventListener('click', () => {
    const bgColor = document.getElementById('bgColor').value;
    const progressColor = document.getElementById('progressColor').value;
    const thumbStyle = document.getElementById('thumbStyle').value;
    const arrowDirection = document.getElementById('arrowDirection').value;
    const direction = document.getElementById('direction').value;
    const initialValue = parseInt(document.getElementById('initialValue').value);

    customSlider.updateConfig({
        trackColor: bgColor,
        progressColor: progressColor,
        thumbStyle: thumbStyle,
        arrowDirection: arrowDirection,
        direction: direction,
        value: initialValue
    });
});

// 初始值滑条控制
document.getElementById('initialValue').addEventListener('input', (e) => {
    document.getElementById('initialValueDisplay').textContent = `${e.target.value}%`;
});

// 初始隐藏箭头方向选项
document.getElementById('arrowDirectionGroup').style.display = 'none';